<script setup>
import {
  Edit,
  Delete,
  Close
} from '@element-plus/icons-vue'


import { ref } from 'vue'


const types = ref([
  {
    "id": 0,
    "contentValue": "黑",
  },
  {
    "id": 1,
    "contentValue": "白",
  },

])


const versions = ref([
  {
    "id": 1,
    "contentValue": "版本一",
  },
  {
    "id": 2,
    "contentValue": "版本二",
  },

])

const type = ref('')

const version = ref('')



const versionSeasons = ref([


])


import {
  resourceMemberOrderEditService,
  resourceMemberOrderListService
} from '@/api/resourceMemberOrder.js'



import { Plus } from '@element-plus/icons-vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
//控制抽屉是否显示
const visibleDrawer = ref(false)
//添加表单数据模型
const versionSeasonModel = ref({
  type:1
})


//导入token
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();


//上传成功的回调函数
const uploadSuccess = (result) => {
  versionSeasonModel.value.imgUrl = result.data;
  console.log(result.data);
}

const uploadAudioSuccess = (result) => {
  versionSeasonModel.value.audioUrl = result.data;
  console.log(result.data);
}


//添加文章
import { ElMessage } from 'element-plus'
const addVersionSeason = async (clickState) => {
  //把发布状态赋值给数据模型
  versionSeasonModel.value.state = clickState;

  //调用接口
  let result = await versionSeaonAddService(versionSeasonModel.value);

  ElMessage.success(result.msg ? result.msg : '添加成功');

  //让抽屉消失
  visibleDrawer.value = false;

  //刷新当前列表
  resourceMemberOrderList()
}

//编辑分类
const updateGoodPrice = async () => {
  //调用接口
  let result = await resourceMemberOrderEditService(versionSeasonModel.value);

  ElMessage.success(result.msg ? result.msg : '修改成功')

  //调用获取所有分类的函数
  resourceMemberOrderList();

  //隐藏弹窗
  visibleDrawer.value = false;
}
type.value=0;


//获取文章列表数据
const resourceMemberOrderList = async () => {
  let params = {
    type: type.value!=='' ? type.value : null,
    version: version.value!=='' ? version.value : null
  }

  let result = await resourceMemberOrderListService(params);
  versionSeasons.value = result.data;

}


resourceMemberOrderList();

const uploadHeadPicSuccess = (result) => {
  versionSeasonModel.value.backgroundUrl = result.data.fileUrl;
}
const delHeadPicImg = () => {
  versionSeasonModel.value.backgroundUrl = '';
}



//定义变量,控制标题的展示
const title = ref('')
const showVersionSeason = (row) => {

  visibleDrawer.value = true, title.value = '编辑信息'
  versionSeasonModel.value.name = row.name;
  versionSeasonModel.value.amount =row.amount;
  versionSeasonModel.value.backgroundUrl=row.backgroundUrl;

  versionSeasonModel.value.id = row.id;


}

//清空模型的数据


</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>订单信息设置</span>

      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="组：">
        <el-select placeholder="请选择" v-model="type">
          <el-option v-for="c in types" :key="c.id" :label="c.contentValue" :value="c.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="版本：">
        <el-select placeholder="请选择" v-model="version">
          <el-option v-for="c in versions" :key="c.id" :label="c.contentValue" :value="c.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="resourceMemberOrderList">搜索</el-button>
        <el-button @click="type = '';version=''">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 文章列表 -->
    <el-table :data="versionSeasons" border  style="width: 100%" @selection-change="handleSelectionChange">

      <el-table-column label="名称" prop="name"></el-table-column>

      <el-table-column label="金额" prop="amount"></el-table-column>

      <el-table-column label="组">
        <template v-slot="scope">
          <span v-if="scope.row.priceGroup==0">黑</span>
          <span v-if="scope.row.priceGroup!=0">白</span>
          <span v-else ></span>
        </template>
      </el-table-column>
      <el-table-column label="版本">
        <template v-slot="scope">
          <span v-if="scope.row.version==1">版本一</span>
          <span v-if="scope.row.version==2">版本二</span>
          <span v-else ></span>
        </template>
      </el-table-column>
      <el-table-column label="图片资源">
        <template v-slot="scope">
          <img v-if="scope.row.backgroundUrl" :src="scope.row.backgroundUrl" width="40" height="40" class="head_pic" />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="200px" prop="createTime"></el-table-column>
      <el-table-column label="创建时间" width="200px" prop="updateTime"></el-table-column>
      <el-table-column label="操作"  width="150px">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="showVersionSeason(row)"></el-button>

        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>




    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
      <!-- 添加文章表单 -->
      <el-form :model="versionSeasonModel" label-width="100px">
        <el-form-item label="名称" >
          <span>{{ versionSeasonModel.name }}</span>
        </el-form-item>

        <el-form-item label="价格" >
          <el-input-number v-model="versionSeasonModel.amount" />
        </el-form-item>

        <el-form-item label="图片资源">
          <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
                     action="/api/admin/upload/uploadFile/v2" name="file"
                     :headers="{ 'Authorization': tokenStore.token }"
                     :on-success="uploadHeadPicSuccess">
            <img v-if="versionSeasonModel.backgroundUrl" :src="versionSeasonModel.backgroundUrl" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
          <span v-if="show">{{ versionSeasonModel.backgroundUrl }}</span>
          <el-icon v-if="versionSeasonModel.backgroundUrl" @click="delHeadPicImg()">
            <Close/>
          </el-icon>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateGoodPrice()">保存</el-button>

        </el-form-item>
      </el-form>
    </el-drawer>


  </el-card>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}


/* 抽屉样式 */
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>